<template>
  <div>
    <div class="list-box">
      <div class="head-box">
        <search-form
          ref="searchForm"
          :search-config="searchConfig"
          :label-width="150"
          @clear="clearSearch"
          @search="handleSearch"
        >
          <div class="qup-search-item">
            <el-form-item label="是否存在加急:">
              <el-radio-group v-model="paramsRaw.isUrgent">
                <el-radio :label="3">全部</el-radio>
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </search-form>
      </div>
      <c-permission-tabs v-model="activeType" code="tab">
        <el-tab-pane label="全部" name="all" opt-code="all">
          <List :active-type="activeType" :search-filters="searchFilters" type="all" />
        </el-tab-pane>
        <el-tab-pane label="上传配图" name="uploadPic" opt-code="uploadPic">
          <List :active-type="activeType" :search-filters="searchFilters" type="uploadPic" />
        </el-tab-pane>
        <el-tab-pane label="待分配" name="distribute" opt-code="distribute">
          <List :active-type="activeType" :search-filters="searchFilters" type="distribute" />
        </el-tab-pane>
        <el-tab-pane label="设计任务" name="designTask" opt-code="designTask">
          <List :active-type="activeType" :search-filters="searchFilters" type="designTask" />
        </el-tab-pane>
        <el-tab-pane label="设计单位确认" name="studioConfirm" opt-code="studioConfirm">
          <List :active-type="activeType" :search-filters="searchFilters" type="studioConfirm" />
        </el-tab-pane>
        <el-tab-pane label="终版图纸上传" name="lastdrawingSubmit" opt-code="lastdrawingSubmit">
          <List :active-type="activeType" :search-filters="searchFilters" type="lastdrawingSubmit" />
        </el-tab-pane>
        <el-tab-pane label="转化分配" name="transDistribute" opt-code="transDistribute">
          <List :is-select="true" :active-type="activeType" :search-filters="searchFilters" type="transDistribute" />
        </el-tab-pane>
        <el-tab-pane label="CRM下单" name="crmOrder" opt-code="crmOrder">
          <List :active-type="activeType" :search-filters="searchFilters" type="crmOrder" />
        </el-tab-pane>
        <el-tab-pane label="确图" name="confirmDrawing" opt-code="confirmDrawing">
          <List :active-type="activeType" :search-filters="searchFilters" type="confirmDrawing" />
        </el-tab-pane>
        <el-tab-pane label="单号图纸上传" name="drawingUpload" opt-code="drawingUpload">
          <List :active-type="activeType" :search-filters="searchFilters" type="drawingUpload" />
        </el-tab-pane>
        <el-tab-pane label="窗帘下单" name="curtainOrder" opt-code="curtainOrder">
          <List :active-type="activeType" :search-filters="searchFilters" type="curtainOrder" />
        </el-tab-pane>
        <el-tab-pane label="SAP解锁" name="sapOrder" opt-code="sapOrder">
          <List :active-type="activeType" :search-filters="searchFilters" type="sapOrder" />
        </el-tab-pane>
      </c-permission-tabs>
    </div>
  </div>
</template>

<script>
import List from './List'
import { getDictByPatchType } from '@/api/dataDict'

export default {
  name: 'AutoDesignTask',
  components: { List },
  data() {
    return {
      activeType: '',
      paramsRaw: { isUrgent: 3 },
      searchFilters: [],
      searchConfig: [
        { label: '配图任务编号', prop: 'taskCode', type: 'text', value: '', placeholder: '', filter: true },
        { label: '任务来源编号', prop: 'sourceCode', type: 'text', value: '', placeholder: '', filter: true },
        { label: '门店建设项目号', prop: 'constCode', type: 'text', value: '', placeholder: '', filter: true },
        {
          type: 'select',
          prop: 'shopState',
          label: '门店建设状态',
          value: '',
          config: {
            remote: true,
            // paramField: 'keyWord', // 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/CONST_STATE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' }
          }
        },
        { label: '门店', prop: 'shopCode', type: 'dialog',
          config: {
            defaultProps: { label: 'name', value: 'code' }
          },
          dialogConfig: {
            title: '门店',
            interfacePath: '/select-service/api/v1/shop/page',
            setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
          }
        },
        {
          type: 'select',
          prop: 'drawingSchedule',
          label: '配图进度',
          config: {
            remote: true,
            multiple: true,
            remoteUrl: '/data-dict/api/v2/dictionary/SLM_DRAWING_PROGRESS?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          type: 'select',
          prop: 'taskState',
          label: '任务状态',
          config: {
            remote: true,
            remoteUrl: '/data-dict/api/v2/dictionary/SLM_DRAWING_STATUS?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          type: 'select',
          prop: 'shopLevel',
          label: '店面等级',
          config: {
            remote: true,
            multiple: true,
            remoteUrl: '/data-dict/api/v2/dictionary/SHOP_LEVEL_CODE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        // {
        //   label: '是否存在加急',
        //   prop: 'isUrgent',
        //   type: 'radio',
        //   value: '',
        //   placeholder: '',
        //   config: {
        //     selectData: [
        //       { label: '全部', value: '' },
        //       { label: '是', value: '1' },
        //       { label: '否', value: '0' }
        //     ]
        //   }
        // },
        { label: '加急', prop: 'urgent', type: 'text', value: '', placeholder: '', filter: true },
        {
          type: 'select',
          prop: 'decorationSchedule',
          label: '装修进度',
          filter: true,
          config: {
            multiple: true,
            filterable: false, // 是否允许输入关键字搜索
            remoteUrl: '/data-dict/api/v2/dictionary/DECORATION_SCHEDULE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        { label: '进场时间', prop: 'enterTime', type: 'date', value: '', placeholder: '', filter: true },
        { label: '上传配图确认时间', prop: 'drawingCollectTime', type: 'date', value: '', placeholder: '', filter: true },
        {
          type: 'select',
          prop: 'confirmResult',
          label: '设计单位确认结果',
          value: '',
          placeholder: '',
          config: {
            filterable: false, // 是否允许输入关键字搜索
            multiple: false, // 是否多选
            selectData: [
              { label: '全部', value: '2' },
              { label: '部分', value: '1' }
            ] // 选项集合
          }
        }
      ]
    }
  },
  computed: {
  },
  watch: {},
  created() {
    // this.getDictByPatchTypeAll()
  },
  methods: {
    // 清空搜索条件
    clearSearch(data) {
      this.paramsRaw.isUrgent === 3
      this.searchFilters = []
    },
    // 获取搜索条件
    handleSearch(data) {
      this.searchFilters = data.filtersRaw
      if (this.paramsRaw.isUrgent === 1) {
        this.searchFilters.push({ id: 'urgent', property: 'urgent', operator: 'NOT NULL', value: '' })
      } else if (this.paramsRaw.isUrgent === 0) {
        this.searchFilters.push({ id: 'urgent', property: 'urgent', operator: 'IS NULL', value: '' })
      }
    },
    async getDictByPatchTypeAll() {
      const { CONST_TYPE } = await getDictByPatchType(['CONST_TYPE'])
      CONST_TYPE.slice(0, 2).forEach(el => {
        this.searchConfig[1].config.selectData.push({ label: el.dictName, value: el.dictCode })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.colorSetRed{
  color: red;
}
.head-box{
}
.tableUpButton{
  margin: 10px;
}
  .button{
    margin: 0px !important;
    width: 100px;
    border: 1px solid #dcdcdc;
  }
  .down-button{
    color: black;
  }
  .form{
    border: 1px solid #dcdcdc;
    padding: 20px;
  }
</style>
